<template>
  <a-dropdown :trigger="['click']">
    <div v-if="manualConfigs && manualConfigs.length"
         class="relation-selector-button">
      <span class="iconfont">&#xe7be;</span>
      <RelationSelectorModal :row-id="rowId" :row-index="rowIndex" :context="context" :form-model="formModel" ref="RelationSelectorModal"/>
    </div>
    <a-menu slot="overlay">
      <a-menu-item
        @click="() => openModal(manualConfig)"
        v-for="manualConfig in manualConfigs">
        {{ manualConfig.manual.manualSelectorButtonName }}
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
import {createProps} from '@/utils';
import RelationSelectorModal from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/RelationSelectorModal.vue';

export default {
  name: 'RelationSelectorButton',
  components: {RelationSelectorModal},
  props: {
    context: createProps(Object, () => undefined),
    formModel: createProps(Object, () => undefined),
    manualConfigs: createProps(Array, () => []),
    rowIndex: createProps(Number),
    rowId: createProps(String),
  },
  methods: {
    openModal(manualConfig) {
      this.$refs.RelationSelectorModal.setData(manualConfig);
    },
  }
};
</script>
<style>
.relation-selector-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 5px;
  cursor: pointer;
}

.relation-selector-button .iconfont {
  color: #1890ff;
}
</style>